<template>
	<view class="afterBig">
		<CommenHeader :title="'申请售后'"></CommenHeader>
		<view class="warn">
      <u-icon name="server-fill" size="92" color="#ff8739" style="margin-right: 16rpx;"></u-icon>
			<view class="">当您申请售后，我们知道，我们没有做好，很抱歉耽误您用餐了 您提交的信息财务客服会在2个小时之内完成处理</view>
		</view>
		<view class="shopCarContent">
			<view class="shopTop">
				<view class="">
					<label>
						<checkbox value="all" :checked="hasAllCheck" @click="changeAllCheck" />
						<text>全选</text>
					</label>
				</view>
			</view>
			<view class="listContent">
				<view class="shopList">
					<view class="">
						<image :src="orderInfo.logo | getImg" mode=""></image>
						<view class="">
							<view class="">{{ orderInfo.storeName }}</view>
							<view class="">{{ orderInfo.storeDescription }}</view>
						</view>
					</view>
					<view class="foodList" v-for="(foodItem, foodIndex) in orderInfo.companyOrderDaos" :key="foodIndex">
						<checkbox value="index" :checked="foodItem.checked" ref="childCheckBox"
							@click="radioChange(foodIndex)" />
						<view class="">
							<image :src="foodItem.food.food.foodPic | getImg" mode=""></image>
							<view class="">
								<view class="">{{ foodItem.food.food.foodName }}</view>
								<view class="">
									<view class="">X{{ foodItem.food.foodNum }}</view>
								</view>
							</view>
						</view>
					</view>
					<u-input type="text" v-model="feedback" placeholder="请填写您的意见"></u-input>
				</view>
			</view>
		</view>
		<view class="writeInfo">
			<view class="tit">
				餐品问题
				<text>*</text>
			</view>
			<view class="select">
				<u-input type="text" v-model="reasonText" placeholder="请选择原因"></u-input>
				<u-icon name="arrow-right" size="36" color="#999"></u-icon>
				<view class="box" @click="showSelect"></view>
			</view>
			<view class="tit" v-if="isSetPhone=='yes'">
				手机号
				<text>*</text>
			</view>
			<view class="select" v-if="isSetPhone=='yes'">
				<u-input type="text" v-model="phone" placeholder="请填写手机号"></u-input>
			</view>
			<view class="tit">
				上传图片
				<text>*</text>
			</view>
			<view class=""><u-upload ref="uUpload" :auto-upload="false" :max-size="100 * 1024 * 1024"
					max-count="6"></u-upload></view>
		</view>
		<view class="submitButton" @click="submitButton">提交</view>
		<!-- 底部地点选择 -->
		<view class="posiBottom">
			<u-popup v-model="posiShow" @touchmove.stop.prevent="" mode="bottom" :closeable="true">
				<view class="posiContent">
					<view class="title">餐品原因</view>
					<view class="listContent">
						<view class="list" v-for="(item, index) in reason" :key="index" @click="select(index)">
							{{ item }}
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
		<Loading :showLoading="showLoading" :text="'正在提交中，请稍等'"></Loading>
	</view>
</template>

<script>
	import {
		createAfterSaleWidthCompany,
		getAfterSalesById,
		getCompanyInfo
	} from '@/utils/req/api.js';
	import {telReg} from '../../utils/regular.js'
	import CommenHeader from '@/components/header/header.vue';
	import Loading from '@/components/loading/loading.vue';
	export default {
		components: {
			CommenHeader,
			Loading
		},
		data() {
			return {
				hasAllCheck: false,
				orderInfo: '',
				posiShow: false,
				reason: [],
				reasonText: '',
				upList: [],
				feedback: '',
				phone: '',
				isSetPhone: '',

				upImgFlag: false,
				showLoading: false
			};
		},
		onShow() {
			this._getCompanyInfo();
		},
		mounted() {
			let obj = JSON.parse(uni.getStorageSync('afterSaleWithOrderInfo'));
			console.log('obj', obj);
			obj.companyOrderDaos.forEach(foodItem => {
				foodItem.checked = false;
			});
			obj.hasClick = false;
			obj.reasonText = '';
			this.orderInfo = obj;
		},
		methods: {
			async _getCompanyInfo() {
				let res = await getCompanyInfo({
					id: uni.getStorageSync('companyId')
				});
				console.log('公司信息res', res);
				this.reason = res.data.result.salesCompensationStandards.split(',');
				this.isSetPhone = res.data.result.isSetPhone;
			},
			// 全选状态更改
			changeAllCheck() {
				this.hasAllCheck = !this.hasAllCheck;
			},
			radioChange(foodIndex) {
				this.orderInfo.companyOrderDaos[foodIndex].checked = !this.orderInfo.companyOrderDaos[foodIndex].checked;
			},
			showSelect() {
				this.posiShow = true;
			},
			showInput(index) {
				this.orderInfo.hcMerchants[index].hasClick = true;
			},
			select(index) {
				this.reasonText = this.reason[index];
				this.posiShow = false;
			},
			submitButton() {
				if (this.upImgFlag) {
					return;
				}

				let flag = false;
				this.orderInfo.companyOrderDaos.forEach(foodItem => {
					foodItem.checked && (flag = true);
				});
				if (!flag) {
					this.$showToast.call(this, '请至少选择一个商品进行售后', 'warning');
					return;
				}
				if (!this.reasonText) {
					this.$showToast.call(this, '请选择退货原因', 'warning');
					return;
				}
				if (this.isSetPhone=='yes') {
					if (!this.phone) {
						this.$showToast.call(this, '请输入手机号', 'warning');
						return;
					}
					if(!telReg.test(this.phone)){
						this.$showToast.call(this, '请输入正确的手机号', 'warning');
						return;
					}
				}
				if (this.$refs.uUpload.lists.length == 0) {
					this.$showToast.call(this, '请上传图片', 'warning');
					return;
				}
				this.showLoading = true;
				this.$refs.uUpload.lists.forEach(async item => {
					let upRes = await this.$uploadFile(item.url);
					let {
						success,
						message
					} = JSON.parse(upRes.data);
					if (success) {
						this.upList.push(message);
					}
				});
			},
			async submitInfo() {
				let orderCompanyId = [];
				this.orderInfo.companyOrderDaos.forEach(item => {
					if (item.checked) {
						orderCompanyId.push(item.companyOrderId);
					}
				});
				let obj = {
					phone:this.phone,
					userId: uni.getStorageSync('myInfo').id,
					orderCompanyId: orderCompanyId.join(','),
					companyId: uni.getStorageSync('companyId'),
					merchantId: this.orderInfo.id,
					orderOrderNum: this.orderInfo.orderNum,
					feedback: this.feedback,
					foodProblems: this.reasonText,
					picture: this.upList.join(',')
				};
				console.log('obj', obj);
				let result = await createAfterSaleWidthCompany(obj);
				console.log('售后的res', result);
				if (result.data.success) {
					uni.redirectTo({
						url: '/pages/company/submitSuccess',
						fail: err => {
							console.log('err', err);
						}
					});
					this.showLoading = false;
				} else {
					this.$showToast.call(this, result.data.message, 'warning');
				}
			}
		},
		watch: {
			hasAllCheck(newVal) {
				this.orderInfo.companyOrderDaos.forEach((item, index) => {
					item.checked = newVal;
				});
			},
			upList(newVal) {
				if (newVal.length == this.$refs.uUpload.lists.length) {
					this.upImgFlag = true;
					this.showLoading = false;
					this.submitInfo();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.afterBig {
		min-height: 100vh;
		background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
		background-size: 100vw 466rpx;
		background-repeat: no-repeat;
		background-color: #f5f5f5;
		padding: 40rpx 20rpx;
		padding-bottom: 150rpx;

		.top {
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				transform: rotate(90deg);
			}

			text {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.warn {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 36rpx 32rpx;
			@include flexs();
			font-size: 28rpx;
			line-height: 1.5;
			color: rgba(0, 0, 0, 0.5);

			image {
				width: 100rpx;
				flex-shrink: 0;
				height: 100rpx;
				margin-right: 20rpx;
			}
		}

		.shopCarContent {
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding: 40rpx 0 48rpx 0;

			.listContent {
				// padding: 0 20rpx;
			}

			.warn {
				font-size: 28rpx;
				line-height: 2;
				border-radius: 50rpx;
				background-color: #ffedd7;
				color: #ec2f2f;
				text-align: center;
				margin: 20rpx 0;
			}

			>.shopTop {
				@include flexs(space-between, center);
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 2;
				color: rgba(0, 0, 0, 0.55);

				label,
				view {
					@include flexs(flex-end, center);
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}

				/deep/.uni-checkbox-input {
					margin-right: 16rpx;
				}
			}

			.shopList {
				>view:nth-child(1) {
					margin: 20rpx 0;
					@include flexs();
					border-bottom: 1px solid #eee;
					padding: 32rpx 0;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 24rpx;
						margin-left: 20rpx;
						border: 1px solid rgba(0, 0, 0, 0.1);
						border-radius: 16rpx;
						flex-shrink: 0;
					}

					>view {
						height: 100rpx;
						@include flexs(space-between, flex-start);
						flex-direction: column;
						// padding: 10rpx 0;

						>view {
							&:nth-child(1) {
								font-size: 28rpx;
								font-weight: bold;
							}

							&:nth-child(2) {
								font-size: 24rpx;
								color: rgba(0, 0, 0, 0.55);
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
							}
						}
					}
				}

				.foodList {
					@include flexs();
					margin: 40rpx 0 32rpx 0;
					padding: 0 20rpx;

					>view {
						width: 100%;
						@include flexs();

						image {
							width: 112rpx;
							height: 112rpx;
							margin-right: 20rpx;
							margin-left: 24rpx;
							flex-shrink: 0;
							// border:1px solid rgba(0,0,0,0.1);
							border-radius: 16rpx;
						}

						>view {
							flex: 1;
							height: 100rpx;
							@include flexs(space-between, flex-start);
							flex-direction: column;

							>view {
								@include flexs(space-between, center);
								width: 100%;

								&:nth-child(1) {
									font-size: 30rpx;
									font-weight: bold;
								}

								>view {
									@include flexs();

									&:nth-child(2) {
										border-radius: 50rpx;
										border: 1px solid #eee;
									}

									&:nth-child(1) {
										font-size: 28rpx;
										font-weight: 400;
										color: rgba(0, 0, 0, 0.55);
									}

									>view {
										width: 50rpx;
										height: 50rpx;
										font-size: 36rpx;
										text-align: center;
										line-height: 50rpx;
									}

									/deep/.u-input__input {
										flex: 1;
										line-height: 50rpx;
										height: 50rpx;
										font-size: 28rpx;
										min-height: 50rpx !important;
										text-align: center;
									}
								}
							}
						}
					}
				}

				.button {
					display: inline;
					padding: 0 20rpx;
					font-size: 24rpx;
					line-height: 2;
					color: #fa690a;
					border: 1px solid #fa690a;
					border-radius: 100rpx;
					float: right;
					margin: 20rpx 0 0 0;
				}

				>/deep/.u-input {
					border-radius: 10rpx;
					margin: 0 20rpx;
					padding-left: 20rpx !important;
					background-color: #f5f5f5;
				}
			}

			.total {
				padding: 40rpx 0;
				@include flexs(space-between, center);
				border-top: 1px solid #eee;

				>view {
					&:nth-child(2) {
						color: #fa690a;
					}
				}
			}
		}

		/deep/.uni-checkbox-input {
			border-radius: 50%;
			width: 36rpx;
			height: 36rpx;
			margin-right: 0;
		}

		/deep/.uni-checkbox-input-checked {
			border-color: #fa690a !important;

			&:before {
				content: '';
				width: 30rpx;
				height: 30rpx;
				background-color: #fa690a;
				border-radius: 50%;
				display: block;
			}
		}

		.writeInfo {
			background: #fff;
			border-radius: 20rpx;
			margin: 40rpx 0;
			padding: 40rpx 20rpx;

			.tit {
				font-size: 30rpx;
				line-height: 2;

				text {
					color: #ff0000;
					margin-left: 5rpx;
				}
			}

			>.select {
				width: 100%;
				background-color: #f1f1f1;
				border-radius: 10rpx;
				margin: 20rpx 0;
				padding: 0 20rpx;
				position: relative;
				@include flexs(space-between, center);

				image {
					width: 30rpx;
					height: 30rpx;
				}

				.box {
					position: absolute;
					width: 100%;
					left: 0;
					height: 100%;
					top: 0;
				}
			}

			/deep/.u-list-item:nth-child(1) {
				margin-left: 0;
			}
		}

		.submitButton {
			width: 100%;
			background-color: #fa690a;
			color: #fff;
			text-align: center;
			border-radius: 50rpx;
			line-height: 2;
			padding: 15rpx 0;
		}

		.posiBottom {
			/deep/.u-drawer-bottom {
				width: 100% !important;
				padding: 30rpx 20rpx 40rpx 20rpx;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
			}
		}

		.posiContent {
			>view {
				&:nth-child(1) {
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
				}
			}

			>.listContent {
				margin-top: 10rpx;

				.list {
					border-bottom: 1px solid #eee;
					font-size: 30rpx;
					line-height: 2;
					padding: 10rpx 0;
					color: #333;

					&:last-child {
						border-bottom: 0;
					}
				}
			}
		}
	}
</style>

<style lang="scss">
	.afterBig {
		.posiBottom {
			/deep/ {
				.u-drawer__scroll-view {
					max-height: 75vh;
				}
			}
		}
	}
</style>